<template>
  <div class="enterprises">
    <div class="body">
      <div class="title">
        企业名称与LOGO设置
      </div>
      <div class="from" v-loading="loading" element-loading-text="正在查询中。。。">
        <el-form :model="ruleForm" ref="createActive" label-width="100px" class="demo-ruleForm">
          <el-form-item label="企业名称" prop="company_name" :rules="filter_rules({required:true})">
            <el-input style="width:30%" maxlength="20" v-model="ruleForm.company_name" placeholder="请输入企业名称"></el-input>
          </el-form-item>
          <el-form-item label="企业logo" prop="logo" :rules="filter_rules({type: 'upload'})">
            <el-upload
              class="avatar-uploader"
              action="/api/backstage/fileUpload"
              name="file_path"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="ruleForm.logo" :src="ruleForm.logo" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <p class="wran">建议上传图片尺寸640*640 大小不超过1M </p>
          </el-form-item>
          <el-form-item>
            <el-button size="medium" type="primary" @click="submitForm('createActive')">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { get_Company, edit_Company } from "@/api/enterprisesSet";

export default {
  name: "EnterprisesSet",
  data() {
    return {
      loading:false,
      ossPublicUrl: localStorage.getItem("ossPublicUrl"),
      ruleForm: {
        company_name: "",
        logo: "",
        file_path: ""
      }
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.ruleForm.logo = this.ossPublicUrl + '/' + res.data.file_path
    },
    beforeAvatarUpload(file){
        let name = file.name.split('.');
        if(name[name.length - 1] === 'jpg'||name[name.length - 1] === 'jpeg'||name[name.length - 1] === 'png'){
            return file
        }else {
            this.$message.error('图片只能是 jpeg/png 格式!')
            return false
        }
    },
    async saveObj(){
      this.loading=true;
      const query = {...this.ruleForm, id: localStorage.getItem("companyId"), company_id: localStorage.getItem("companyId")};
      const { data } = await edit_Company(query);
      this.loading=false;
      if (data.status == 100) {
        this.ruleForm = data.data;
        this.$message.success('保存成功')
        this.initList()
      }
    },
    async submitForm(e) {//修改数据保存
      this.$refs[e].validate(valid => {
        if (valid) {
          this.saveObj();
        } else {
          return false;
        }
      });
    },
    async initList() {//获取数据
      this.loading=true;
      const query = {id: localStorage.getItem("companyId"), company_id: localStorage.getItem("companyId")};
      const { data } = await get_Company(query);
      this.loading=false;
      if (data.status == 100) {
        this.ruleForm = data.data;
      }
    }
  },
  created() {
    this.initList();
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.enterprises {
  margin: 20px;
  .body {
    background: #fff;
    padding: 1.5rem;
    .title {
      background: #f4f6f8;
      font-size: 16px;
      color: #3a3a3a;
      font-weight: 600;
      padding: 1rem 2rem;
    }
    .from {
      margin-top: 2rem;
      .img {
        width: 6rem;
        height: 6rem;
        border: 1px solid #dcdfe6;
        border-radius: 3px;
        font-size: 12px;
        color: #a0a0a0;
        text-align: center;
        line-height: 6rem;
      }
      .wran {
        font-family: PingFangSC-Medium;
        font-size: 12px;
        color: #F56C6C;
      }
    }
  }
}
.avatar-uploader {
  border: 1px dashed #ccc;
  width: 120px;
  height: 120px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>
